<script setup>
import { ref, onMounted, h } from "vue";
import { user } from "@/store/index";
import ParentItem from "./item/ParentItem.vue";
import router from "@/router";
import { ElNotification } from "element-plus";

import { addComment, frontGetParentComment } from "@/api/comment";

const userStore = user();
const props = defineProps({
  // 评论的类型 文章 article 说说 talk
  type: {
    type: String,
    default: () => {},
  },
  // 文章/说说 id
  id: {
    type: Number,
    default: () => {},
  },
});
const activeOrder = ref("hot"); // 排序 最新还是最热 最热 hot

const topApplyContent = ref(""); // 顶部评论框内的内容，当前登录人评论文章/说说

const total = ref(0); // 主评论条数

const parentItemRef = ref(null); // 子组件ref

const isExpand = ref(false); // 评论是否展开 true展开 false关闭

const toggleExpand = () => {
  isExpand.value = !isExpand.value;
};

const changeOrder = (type) => {
  activeOrder.value = type;
};

// 清空子组件内存在打开的输入框
const clearOthers = () => {
  parentItemRef.value && parentItemRef.value.closeComment();
};

const toLogin = () => {
  if (userStore.getUserInfo.id) return;
  router.push("/login");
};

const publish = async () => {
  if (!userStore.getUserInfo.id) {
    ElNotification({
      title: "温馨提示",
      message: h("div", { style: "color: #e6c081; font-weight: 600;" }, "请先登录"),
    });
    return;
  }
  if (!topApplyContent.value) {
    ElNotification({
      title: "温馨提示",
      message: h("div", { style: "color: #e6c081; font-weight: 600;" }, "请输入评论"),
    });
    return;
  }
  const data = {
    from_id: userStore.getUserInfo.id,
    from_avatar: userStore.getUserInfo.avatar,
    from_name: userStore.getUserInfo.nick_name,
    content: topApplyContent.value,
  };
  if (props.type == "article") {
    data.article_id = props.id;
  } else if (props.type == "talk") {
    data.talk_id = props.id;
  }

  const res = await addComment(data);
  if (res.code == 0) {
    topApplyContent.value = "";
    ElNotification({
      title: "提示",
      message: h("div", { style: "color: #7ec050; font-weight: 600;" }, "评论成功"),
    });
    parentItemRef.value && parentItemRef.value.getComment("clear");
    isExpand.value = true;
  } else {
    ElNotification({
      title: "错误提示",
      message: h("div", { style: "color: #f56c6c; font-weight: 600;" }, res.message),
    });
  }
};

// 获取主评论条数
const getTotal = (val) => {
  total.value = val;
};

// 在初始化的时候获取主评论条数
const getCommentTotal = async () => {
  const res = await frontGetParentComment({
    current: 1,
    size: 5,
    type: props.type,
    id: props.id,
    order: "",
  });
  if (res && res.code == 0) {
    const { total } = res.result;
    getTotal(total - 0);
  } else {
    ElNotification({
      title: "错误提示",
      message: h("div", { style: "color: #f56c6c; font-weight: 600;" }, res.message),
    });
  }
};
onMounted(() => {
  getCommentTotal();
});
</script>

<template>
  <div class="comment">
    <div class="comment-header" v-if="total">
      <div class="total-label">
        评论 <span class="total-value">{{ total }}</span>
      </div>
      <div v-if="isExpand" class="flex !ml-[2rem] items-center">
        <span :class="['tab', activeOrder == 'hot' ? 'active-order' : '']" @click="changeOrder('hot')">最热</span>
        <span class="tab">|</span>
        <span :class="['tab', activeOrder == 'new' ? 'active-order' : '']" @click="changeOrder('new')">最新</span>
      </div>
    </div>
    <div class="comment-input flex justify-start items-center !mt-[1rem]">
      <div class="w-[60px] h-[48px] avatar">
        <el-avatar :src="userStore.getUserInfo.avatar" :size="48" @click="toLogin">登录</el-avatar>
      </div>
      <div class="flex flex-1 justify-start items-center" @mouseenter="clearOthers">
        <el-input class="h-[48px] pc-input-text" type="textarea" v-model="topApplyContent" maxlength="225" placeholder="说点什么吧！"></el-input>
        <el-input class="m-input-text" type="text" v-model="topApplyContent" maxlength="225" placeholder="说点什么吧！"></el-input>
        <el-button type="primary" class="!ml-[10px] publish-btn" @click="publish">发布</el-button>
      </div>
    </div>
    <!-- 评论组件 这里采用了父级评论和子级评论嵌套的方式 -->
    <div class="comment-list">
      <span v-if="total" class="!mt-[5px] more" @click="toggleExpand">{{ isExpand ? "收起" : "查看更多" }}</span>
      <ParentItem v-if="isExpand" ref="parentItemRef" :active="activeOrder" :type="type" :id="id" @returnTotal="getTotal" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.comment {
  width: 100%;
  &-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .total {
      &-label {
        font-size: 1rem;
        display: flex;
        align-items: center;
      }

      &-value {
        margin-left: 0.8rem;
        font-size: 0.8rem;
      }
    }

    .tab {
      cursor: pointer;
      margin-left: 0.8rem;
      font-size: 0.8rem;
      color: var(--dark-font-color);

      &:hover {
        color: var(--primary);
      }
    }
  }
}

.active-order {
  color: var(--primary) !important;
}

.publish-btn {
  background-color: var(--primary);
  font-size: 0.8rem;
  height: 30px;
  padding: 0 1rem;
}
.avatar {
  cursor: pointer;
}

.more {
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--primary);
}
// pc
@media screen and (min-width: 768px) {
  .avatar {
    display: block;
  }

  .m-input-text {
    display: none;
  }
}
// mobile
@media screen and (max-width: 768px) {
  .avatar {
    display: none;
  }

  .pc-input-text {
    display: none;
  }
}
</style>
